﻿<div class="ui-widget-content">
    <h3>Draggable - Eventos</h3>
    <p>
        Quando um draggable é arrastado, este dispara alguns eventos. Tais eventos são:
        <ul>
            <li><tt>start</tt> - Quando o drag começa.</li>
            <li><tt>stop</tt> - Quando o drag termina.</li>
            <li><tt>drag</tt> - Quando o draggable se move enquanto é arrastado.</li>
        </ul>
    </p>
    <p>
        Por exemplo, este draggable já foi arrastado por uma distância de <span id="drag_distancia">0</span> pixels.
        <div style="height: 30px">
            <span id="drag_eventos" class="draggable_free ui-widget-content clicavel " style="padding: 10px">
                Estou parado, me arraste por aí.
            </span>
        </div>
    </p>
    <p>Eis como é que se faz isso:</p>
    <p>
        <pre>$("#drag_eventos").draggable({
    start: function(event, ui) {
        $(this).html("Que legal, estou me mexendo!");
    },
    stop: function(event, ui) {
        $(this).html("Estou parado, me arraste por aí.");
    },
    drag: function(event, ui) {
        $("#drag_distancia").html($("#drag_distancia").html() + 1);
    }
});</pre>
    </p>
    <script type="text/javascript">
        inicializador.draggableEventos = function() {
            $("#drag_eventos").draggable({
                start: function(event, ui) {
                    $(this).html("Que legal, estou me mexendo!");
                },
                stop: function(event, ui) {
                    $(this).html("Estou parado, me arraste por aí.");
                },
                drag: function(event, ui) {
                    $("#drag_distancia").html(parseInt($("#drag_distancia").html()) + 1);
                }
            });
        };
    </script>
</div>